<script setup>
import NavigationBar from "@/components/navigationBar.vue";
import router from "@/router/index.js";

// 点击商家跳转详情页
function gotoBusinessInfo(item) {
  router.push({
    path: '/businessInfo',
    query: { name: item.name }
  });
}

// 商家列表数据
const businessList = [
  {
    name: "万家饺子（软件园E18店）",
    image: "img/sj01.png",
    quantity: 3,
    minOrder: 15,
    deliveryFee: 3,
    desc: "各种饺子炒菜"
  },
  {
    name: "小锅饭豆腐馆（全运店）",
    image: "img/sj02.png",
    quantity: 2,
    minOrder: 15,
    deliveryFee: 3,
    desc: "特色美食"
  },
  {
    name: "麦当劳麦乐送（全运路店）",
    image: "img/sj03.png",
    quantity: 1,
    minOrder: 15,
    deliveryFee: 3,
    desc: "汉堡薯条"
  },
  {
    name: "米村拌饭（浑南店）",
    image: "img/sj04.png",
    quantity: null,
    minOrder: 15,
    deliveryFee: 3,
    desc: "各种炒菜拌饭"
  },
  {
    name: "申记串道（中海康城店）",
    image: "img/sj05.png",
    quantity: null,
    minOrder: 15,
    deliveryFee: 3,
    desc: "烤串炸串"
  },
  {
    name: "半亩良田排骨米饭",
    image: "img/sj06.png",
    quantity: null,
    minOrder: 15,
    deliveryFee: 3,
    desc: "排骨米饭套餐"
  },
  {
    name: "茶兮鲜果饮品（国际软件园店）",
    image: "img/sj07.png",
    quantity: null,
    minOrder: 15,
    deliveryFee: 3,
    desc: "甜品饮品"
  },
  {
    name: "唯一水果捞（软件园E18店）",
    image: "img/sj08.png",
    quantity: null,
    minOrder: 15,
    deliveryFee: 3,
    desc: "新鲜水果"
  },
  {
    name: "满园春饼（全运路店）",
    image: "img/sj09.png",
    quantity: null,
    minOrder: 15,
    deliveryFee: 3,
    desc: "各种春饼"
  }
];
</script>

<template>
  <div class="wrapper">
    <!-- 顶部导航 -->
    <header class="bg-[rgb(0,151,255)] h-[75px] text-white text-center text-[30px] pt-4 fixed top-0 left-0 right-0 z-50">
      <p>商家列表</p>
    </header>
    <div class="h-[60px]"></div>

    <!-- 商家列表 -->
    <ul class="business">
      <li
          v-for="item in businessList"
          :key="item.name"
          @click="gotoBusinessInfo(item)"
          class="flex items-start border-b border-gray-200 py-5 cursor-pointer"
      >
        <div class="business-img relative">
          <img
              :src="item.image"
              alt="商家图片"
              class="w-[80px] h-[80px] object-cover rounded-md"
          />
          <div
              v-if="item.quantity"
              class="business-img-quantity absolute top-0 right-0 bg-red-500 text-white text-xs rounded-full w-6 h-6 flex items-center justify-center"
          >
            {{ item.quantity }}
          </div>
        </div>

        <div class="business-info pl-4 text-gray-600 flex-1">
          <div class="text-lg font-bold text-gray-800">{{ item.name }}</div>
          <div class="pt-1 text-sm">
            ¥{{ item.minOrder }}起送 | ¥{{ item.deliveryFee }}配送
          </div>
          <div class="pt-1 text-sm">{{ item.desc }}</div>
        </div>
      </li>
    </ul>
    <div class="h-[50px]"></div>

    <!-- 底部导航 -->
    <NavigationBar/>
  </div>
</template>

<style scoped>
/* 可按需添加自定义样式 */
</style>
